<template>
  <div class="page-container" style="min-width: 1170px;">
    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc :model="baseModel" :data="descData" size="default" direction="vertical" :attrs="$defaultDetailDescAttrs"
      border  labelClassName="widthdiv4" contentClassName="widthdiv4">
      <template v-slot:attachedDTOList>
        <div class="image__preview" v-if="descData.attachedDTOList">
            <ex_image_view
              v-for="(item,index) in descData.attachedDTOList"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item.filePath">
            </ex_image_view>
          </div>
        </template>
    </ex_super_desc>

    <ex_super_form id="page_order_create" ref="form" v-bind="formOption" v-loading="loading"
      class="common-form-row common-form-panel-div-right" label-position="right" label-width="140px">

    </ex_super_form>
  </div>
</template>

<script>
let default_obj = {

}
import router_params from '@/mixin/router_params';
export default {
  title: 'label_abnormal_detail',
  mixins: [router_params],
  data() {
    return {
      loading: false,
      baseModel:[
        { key: 'orderNo', label: 'label_order_code' },
        { key: 'boxQty', label: '箱数' },
        { key: 'skuQty', label: '件数' },
        { key: 'anomalyClassifyName', label: 'label_anomaly_class' },
        { key: 'anomalyCause', label: 'label_reason_abnormal',formatter: (r, c, v) => this.$enumShow(v, 'AnomalyCauseEnum') },
        { key: 'anomalyRemark', label: '备注' },
        { key: 'anomalySourceMode', label: 'label_generation_method',formatter: (r, c, v) => this.$enumShow(v, 'AbnormalSourceModeEnum') },
        { key: 'reportUserName', label: 'label_report_user' },
        { key: 'reportTime', label: 'label_report_time',formatter: (r, c, v, i) => this.$dateFormat(v) },
        { key: 'anomalyBoxQty', label: 'label_abnormal_box_count' },
        { key: 'processedAnomalyBoxQty', label: '已处理异常箱数' },
        { key: 'pendingAnomalyBoxQty', label: '待处理异常箱数' },
        { key: 'anomalySkuQty', label: 'label_abnormal_piece_count' },
        { key: 'processedAnomalySkuQty', label: '已处理异常件数' },
        { key: 'pendingAnomalySkuQty', label: '待处理异常件数' },
        { key: 'modifier', label: '更新人' },
        { key: 'gmtModify', label: '更新时间',formatter: (r, c, v, i) => this.$dateFormat(v)  },
        { key: 'anomalyRestartCause', label: '重启原因' },
        { key: 'anomalySkuValue', label: '异常商品价值' },
        {slot:'attachedDTOList', key: 'attachedDTOList', label: '异常图片' },
      ],
      descData:{},
      formOption: {

        model: [

          { header: "label_abnormal_specification", },
          {
            key: 'anomalyDetailDTOList',

            formType: "table",
            itemAttrs: {
              'label-width': '0',
            },
            model: [
              { key: 'boxNo', label: '箱号',  'show-overflow-tooltip': true, },
              { key: 'skuName', label: 'label_sku_name', 'width': 130, 'show-overflow-tooltip': true, },
              { key: 'skuOnlyCode', label: '商品编码', 'min-width': 150, 'show-overflow-tooltip': true, },
              { key: '', label: '订单箱数', 'width': 110, 'show-overflow-tooltip': true, },
              { key: 'quantity', label: '订单件数', 'width': 110, 'show-overflow-tooltip': true, },
              { key: '', label: 'label_abnormal_box_count', 'width': 110, 'show-overflow-tooltip': true, },
              { key: 'abnormalQty', label: 'label_abnormal_piece_count', 'width': 110, 'show-overflow-tooltip': true, },
            ],

          },
          { header: "label_check_feedback_record", },

          {
            key: 'checkRecordDTOList',
            formType: "table",
            itemAttrs: {
              'label-width': '0',
            },
            model: [
              {
                key: 'checkResponsibleParty', label: '判定责任方', 'min-width': 150, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$enumShow(v, "AbnormalResponsiblePartyEnum")
              },
              { key: 'checkRemark', label: 'label_check_remarck', 'min-width': 150, 'show-overflow-tooltip': true, },
              {  label: '是否上传附件', 'min-width': 150, 'show-overflow-tooltip': true,
                render(h,data) {
                  return(
                   <span>{data.row.attachedDTOList.length>0?"是":"否"}</span>
                  )
                }
              },
              { key: 'attachedDTOList', label: '上传附件', 'min-width': 150,
                render(h,data) {
                  return (
                    <div>
                    {
                      data.row.attachedDTOList.map(item =>{
                      return (
                        <ex_image_view
                          style="width: 100px; height: 100px"
                          src={item.filePath}>
                        </ex_image_view>
                      )
                    })
                    }

                    </div>

                  )
                },
              },

              {
                key: 'checkUserName', label: '反馈人员', 'width': 110, 'show-overflow-tooltip': true,
              },
              {
                key: 'gmtCreate', label: '反馈时间', 'width': 130, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$dateFormat(v)
              },

            ],

          },
          { header: "label_check_handler_record", },

          {
            key: 'disposeRecordDTOList',
            formType: "table",
            itemAttrs: {
              'label-width': '0',
            },
            model: [
              {
                key: 'disposeResponsibleParty', label: '判定责任方', 'min-width': 150, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$enumShow(v, "AbnormalResponsiblePartyEnum")
              },
              {
                key: 'disposeMode', label: 'label_do_with_method', 'min-width': 180, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$enumShow(v, "AbnormalDisposeModeEnum")
              },
              {
                key: 'disposeBoxQty', label: 'label_handler_box_count', 'width': 130, 'show-overflow-tooltip': true,
              },
              {
                key: 'disposeSkuQty', label: 'label_handler_piece_count', 'width': 130, 'show-overflow-tooltip': true,
              },
              {
                key: 'isCompensation', label: 'label_is_compensation', 'width': 130, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum")
              },
              {
                key: 'compensationAmount', label: 'label_compensation_money', 'width': 130, 'show-overflow-tooltip': true,
              },

              {
                key: 'disposeUserName', label: 'label_handler_user', 'width': 110, 'show-overflow-tooltip': true,},
              {
                key: 'gmtCreate', label: 'label_handler_time', 'width': 130, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$dateFormat(v)
              },
              {
                key: 'modifier', label: '更新人', 'width': 110, 'show-overflow-tooltip': true,
              },
              {
                key: 'gmtModify', label: '修改备注', 'width': 110, 'show-overflow-tooltip': true,
                formatter: (r, c, v, i) => this.$formatNameCode(v, r.disposeUserCode)
              },
            ],

          },

        ],
      },
    }
  },

  methods: {
    fixTabLabel(code) {
      this.$emit("tagModifyLabel", { _key: 'label_name_code', name: this.$tt("label_abnormal_detail"), code: code})

    },
    init_order(id) {
      this.loading = true
      let data = {
        anomalyId: id
      }
      this.$ajax({
        url: "/tms-api/task/TmsBaseAnomalyRpc/detail.json",
        method: 'post',
        data,
        success: (res) => {
          if (!res.data) return this.$message.error(this.$tt("label_data_loss"))
          this.$refs.form.setData(res.data)
          this.loading = false
          this.fixTabLabel(res.data.code)
          this.descData = res.data
        },
      })
    },
    init_data_default(params) {
      this.init_order(params.id)
    },
  }
}
</script>

<style scoped lang="less">


/deep/ .el-image+.el-image{
    margin-left: 10px;
  }

</style>
